<template>
   <div style="width:1050px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
/**
 * axios+echarts
 * 1、data中存放可遍数据
 * 2、计算属性中编写echarts的选项对象
 * 3、mounted生命周期的钩子函数中编写对echarts的初始化工作(chart对象的创建)
 * 4、在watch监听器中完成对象对echarts选项的设置
 */
import * as echarts from 'echarts'
export default {
    data(){
        return{
            accountData:[],
            loginCountData:[]
        }
    },
    computed:{
        options(){
            return{
                xAxis:{
                    data:this.accountData
                },
                yAxis:{},
                series:[
                    {
                        type:'bar',
                        data:this.loginCountData
                    }
                ]
            }
        }
    },
    methods:{
        async getAdminList(){
            const result=await this.$api.admiModule.getAdminListApi()
            if(result.data.list&&result.data.list.length>0){
               console.log('名称集合',result.data.list.map(item=>item.account)); 
               console.log('次数集合',result.data.list.map(item=>item.login_count)); 
               this.accountData=result.data.list.map(item=>item.account)
               this.loginCountData=result.data.list.map(item=>item.login_count)
            }
        }
    },
    created(){
        this.getAdminList()
    },
    watch:{
       loginCountData(newval){
           //在监视器之中再次调用一下setOptions就可以了
           this.myChart.setOption(this.options)
       } 
    },
    mounted(){
        this.myChart=echarts.init(this.$refs.main)
        //this.myChart.setOption(this.options)
    }
}
</script>

<style>

</style>